<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				人脸录入
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label class="weui-label">班级</label>
				</div>
				<div class="weui-cell__bd">
					<select class="weui-select" @change="queryFn" v-model="params.clazzId">
						<option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
					</select>
				</div>
			</div>
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label class="weui-label">类别</label>
				</div>
				<div class="weui-cell__bd">
					<select class="weui-select" v-model="type">
						<option value="c">学生</option>
						<option value="p">家长</option>
					</select>
				</div>
			</div>
			<div class="panel_main tc" v-if="type=='c'">
				<div class="panel_list">
					<div class="panel_list_big">姓名</div>
					<div class="panel_list_big panel_list_2">
						是否通过
					</div>
					<div class="panel_list_big"></div>
				</div>
				<div class="panel_main_list">
					<div class="panel_list" v-for="item in 20">
						<div class="panel_list_big">
							张飒飒
						</div>
						<div class="panel_list_big panel_list_2">
							<a class="weui-btn weui-btn_mini weui-btn_default check-btn">通过</a>
							<a class="weui-btn weui-btn_mini weui-btn_warn check-btn">不通过</a>
						</div>
						<div class="panel_list_big underline">
							查看
						</div>
					</div>
				</div>
			</div>
			<div class="panel_main tc" v-if="type=='p'">
				<div class="panel_list">
					<div class="panel_list_min">姓名</div>
					<div class="panel_list_min panel_list_3">
						是否通过
					</div>
					<div class="panel_list_big">备注</div>
					<div class="panel_list_4"></div>
				</div>
				<div class="panel_main_list">
					<div class="panel_list" v-for="item in 20">
						<div class="panel_list_min">
							张飒飒
						</div>
						<div class="panel_list_min panel_list_3">
							<a class="weui-btn weui-btn_mini weui-btn_default check-btn">通过</a>
							<a class="weui-btn weui-btn_mini weui-btn_warn check-btn">不通过</a>
						</div>
						<div class="panel_list_big">张三的爸爸</div>
						<div class="panel_list_4 underline">查看</div>
					</div>
				</div>
			</div>
			<div class="pa flex batch-btn">
				<a href="javascript:;" class="weui-btn weui-btn_default check-btn">全部通过</a>
				<a href="javascript:;" class="weui-btn weui-btn_warn check-btn">全部不通过</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: 'c',
				params: {
					clazzId: '',
				},
				leaveList: [],
				clazzList: []
			}
		},
		methods: {
			queryFn() {
				this.$http.fetchOutLeaveApply(this.params).then(resp => {
					let data = resp.data;
					this.leaveList = data.records;
					Object.assign(this.params, {
						current: data.current,
						size: data.size,
						pages: data.pages,
						total: data.total
					})
				})
			},
			fetchClazzList() {
				this.$http.fetchClazzList().then(resp => {
					let clazzList = resp.data;
					this.clazzList = clazzList;
					if (clazzList.length === 1) {
						this.params.clazzId = clazzList[0].id;
					}
					this.queryFn();
				})
			}
		},
		created() {
			this.fetchClazzList();
		},
	}
</script>

<style scoped>
	.panel_main {
		width: 100%;
		height: calc(100% - 11.2rem);
		overflow: hidden;
		font-size: 1.4rem;
	}

	.panel_list {
		width: 100%;
		display: inline-block;
		padding: 0.5rem 0;
	}

	.panel_main_list {
		width: 100%;
		height: calc(100% - 10rem);
		overflow: auto;
	}

	.panel_list:nth-child(2n-1) {
		background: #fff;
	}

	.panel_list>div {
		float: left;
		box-sizing: border-box;
	}

	.panel_list .panel_list_big {
		width: 33.3%;
		padding: 0.2rem 0;
	}

	.panel_list .panel_list_2,
	.panel_list .panel_list_3 {
		display: flex;
		justify-content: space-around;
	}

	.panel_list .panel_list_min {
		width: 20%;
		padding: 0.2rem 0;
	}

	.panel_list .panel_list_3 {
		width: 35%;
	}

	.panel_list .panel_list_4 {
		width: 10%;
		padding: 0.2rem 0;
	}

	.batch-btn {
		bottom: 0;
		width: 100%;
		height: 5rem;
		background: #fff;
	}
</style>
